<template>
    <div class="content">
      <!--搜索表单-->
      <div class="common-seach-wrap">
        <el-form
          :inline="true"
          :model="query"
          class="demo-form-inline"
        >
          <el-form-item label="文件名">
            <el-input
              v-model="query.title"
              placeholder="请输入文件名查询"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="getTableInfo"
              >查询</el-button
            >
            <el-button
              type="primary"
              icon="Plus"
              @click="handleAdd"
              v-auth="'company_system_add'"
              >添加文件</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" row-key="id" height="100%" stripe>
        <el-table-column type="index" label="#" fixed="left" />
        <el-table-column prop="file_title" label="文件名称" fixed="left" />
        <el-table-column label="文件">
          <template #default="scope">
            <el-link :href="scope.row.file_path" type="primary">查看文件</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" sortable label="添加时间" />
        <el-table-column prop="user.real_name" sortable label="操作人" />
        <el-table-column label="操作" fixed="right" width="300">
          <template #default="scope">
            <el-button
              type="danger"
              link
              icon="DeleteFilled"
              @click="delInfo(scope.row.id)"
              v-auth="'company_system_del'"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-divider border-style="none" />
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        background
        :current-page="curPage"
        :page-size="pageSize"
        layout="total, sizes,prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <el-dialog v-model="dialogVisible" title="添加文件" width="60%">
      <el-form size="small" v-model="form" ref="formRef" label-width="120px">
        <el-form-item label="文件名称">
          <el-input v-model="form.file_title" />
        </el-form-item>
        <el-form-item
        label="上传文件"
        prop="file"
        class="required label-right-align"
        label-width="120px"
      >
        <el-upload
            class="upload-demo"
            :action="apiUrl + '/upload/file'"
            accept=".doc,.docx,.pdf"
            name="iFile"
            :auto-upload="true"
            :limit="1"
            :data="{ group_id: -1, file_type: 'file' }"
            :headers="{ Token: userStore.token, appid: userStore.app_id }"
            :on-success="handleFile"
          >
            <el-icon class="el-icon--upload"><upload-filled size="50px"/></el-icon>
            <div class="el-upload__text">
              <em>点击上传</em>
            </div>
            <template #tip>
              <div class="el-upload__tip">请上传文件，文件不要超过5M</div>
            </template>
          </el-upload>
      </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="form.sort" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
      </template>
    </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, defineEmits, reactive, watch } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { delApi, getListAPi,saveApi } from "@/api/company/file";
  import useUserStore from "@/store/model/user";
const apiUrl = import.meta.env.VITE_BASIC_URL;
const userStore = useUserStore();
const dialogVisible = ref(false);
const query = reactive({
    title: "",
    type:1
  });
const total = ref(0);
const form = ref({
  id: 0,
  file_title: "",
  sort: 0,
  file_path:"",
  file_type:1,
});
const formRef = ref<any>(null);
  watch(
    query,
    () => {
      getTableInfo();
    },
    { deep: true }
  );
  const curPage = ref(1);
  const pageSize = ref(20);
  const tableData = ref([]);
  onMounted(() => {
    getTableInfo();
  });
  const handleSizeChange = (val: number) => {
    pageSize.value = val;
    getTableInfo();
  };
  const handleCurrentChange = (val: number) => {
    curPage.value = val;
    getTableInfo();
  };
  
  function getTableInfo() {
    getListAPi({
      page: curPage.value,
      page_size: pageSize.value,
      ...query,
    }).then((res) => {
      tableData.value = res.data.data;
      total.value = res.data.total;
    });
  }
  
  function delInfo(id: number) {
    ElMessageBox.confirm("确认要删除此文件吗?", "警告！", {
      confirmButtonText: "确认删除",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        delApi(id).then((res: any) => {
          getTableInfo();
          ElMessage({
            type: "success",
            message: "删除成功！",
          });
        });
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "删除已取消",
        });
      });
  }
  
const handleAdd = () => {
  dialogVisible.value = true;
};
const handleFile = (res: any) => {
  if (res.code != 1) {
    ElMessage.error(res.msg);
  } else {
    form.value.file_path = res.data.file_path;
  }
};
function handleSubmit() {
  saveApi(form.value).then((res: any) => {
    ElMessage.success("编辑成功");
    dialogVisible.value = false;
    getTableInfo();
  });
}
  </script>
  
  <style lang="scss">
  .el-tabs {
    .el-tabs__new-tab {
      width: auto !important;
    }
  }
  .table-box {
    height: calc(100% - 200px);
  }
  </style>
  